<template>
  <!-- 为 vchart 准备一个具备大小（宽高）的 DOM，当然你也可以在 spec 配置中指定 -->
  <div :id="chartId" style="width: 100%;height:100%;"></div>
</template>

<script setup>
import {useId} from 'vue'
import VChart from '@visactor/vchart'
defineOptions({ name: 'barVChart' })
const values = [
  { type: 'Nail polish', country: 'Africa', value: 422 },
  { type: 'Nail polish', country: 'EU', value: 437 },
  { type: 'Nail polish', country: 'China', value: 305 },
  { type: 'Nail polish', country: 'USA', value: 128 },
  { type: 'Eyebrow pencil', country: 'Africa', value: 393 },
  { type: 'Eyebrow pencil', country: 'EU', value: 398 },
  { type: 'Eyebrow pencil', country: 'China', value: 506 },
  { type: 'Eyebrow pencil', country: 'USA', value: 130 },
  { type: 'Rouge', country: 'Africa', value: 522 },
  { type: 'Rouge', country: 'EU', value: 357 },
  { type: 'Rouge', country: 'China', value: 704 },
  { type: 'Rouge', country: 'USA', value: 116 },
  { type: 'Lipstick', country: 'Africa', value: 956 },
  { type: 'Lipstick', country: 'EU', value: 436 },
  { type: 'Lipstick', country: 'China', value: 954 },
  { type: 'Lipstick', country: 'USA', value: 884 },
  { type: 'Eyeshadows', country: 'Africa', value: 338 },
  { type: 'Eyeshadows', country: 'EU', value: 452 },
  { type: 'Eyeshadows', country: 'China', value: 123 },
  { type: 'Eyeshadows', country: 'USA', value: 298 }
];
const series = Array.from(new Set(values.map(v => v.country)));
const spec = {
  type: 'bar',
  data: {
    values
  },
  background:'transparent',
  xField: ['type', 'country'],
  yField: 'value',
  seriesField: 'country',
  animationAppear: {
    duration: 500, // 每个柱子的动画时长为 500ms
    delay: (datum, element, ctx, params) => {
      const seriesIndex = series.findIndex(s => s === datum.country);
      return seriesIndex * (500 + 50); // 柱子延迟为 500ms（之前柱子的动画时长）+ 50ms（动画间隔时间）
    }
  },
  legends: [{ visible: true, position: 'middle', orient: 'bottom' }],
  axes: [
    {
      orient: 'left',
      /*label: {
        formatMethod(val) {
          return `${(val * 100).toFixed(2)}%`;
        }
      }*/
    }
  ]
};
const chartId=useId()
onMounted( () => {
// 创建 vchart 实例
  const vchart = new VChart(spec, { dom: chartId })
// 绘制
  vchart.renderSync()
})
</script>

<style scoped>
</style>
